<template>
  <div class="title">
    <div class="title-name" :title="name">
      <slot></slot>
      {{ name }}
    </div>
    <div class="title-more" v-if="path" @click="onMore">
      <span style="color: #666666;">{{ $t('all.autotext1677') }}</span>
      <a-icon type="right" />
    </div>
    <a-col :span="14" align="right" v-if="exportSign">
      <a-button
        type="primary"
        v-if="$auth('PROJECT_COST.PROJECT_FEE_EXPORT') && $store.state.user.project.status!==3"
        @click="exportTap"
      >
        {{ $t('all.autotext228') }}
      </a-button>
    </a-col>
    <export-com :visible.sync="exVisible" />
  </div>
</template>

<script>
import exportCom from '@/views/overview/detail/responsible/components/export'
export default {
  components: {
    exportCom
  },
  props: ['name', 'path', 'param', 'exportSign'],
  data () {
    return {
      exVisible: false
    }
  },
  methods: {
    onMore () {
      const pushp = { name: this.path }
      // eslint-disable-next-line semi
      this.param?.id && (pushp.query = { id: this.param.id })
      this.param?.type && (pushp.query = { type: this.param.type })
      this.$router.push(pushp)
    },
    // 导出结算单
    exportTap () {
      this.exVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  .title-name {
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .title-more {
    color: #666;
    cursor: pointer;
    span {
      margin-right: 8px;
    }
  }
}
</style>
